<template>
  <div>Hook</div>
  <ul v-for="(item, index) in arr" :key="index">
    <li>{{ item }}</li>
  </ul>
  <template>
    <div ref="el">开启三国</div>
  </template>
  <button id="count" @click="kkx">{{ count }}</button>
</template>
<script setup>
import { onMounted, onUnmounted, ref, onUpdated, nextTick } from "vue";
const el = ref();
const arr = ref([]);
const list = [
  "三曹：曹操、曹丕、曹植。",
  "三马：司马懿、司马师、司马昭。",
  "三诸葛：诸葛亮、诸葛瑾、诸葛诞。",
  "三祖：曹操、曹丕、曹睿。",
  "三哲：曹操、孙权、刘备。",
  "三英：刘备、关羽、张飞",
  "蜀汉五虎将：关羽、张飞、赵云、马超、黄忠。",
  "魏五子良将：张辽、张郃、乐进、徐晃、于禁。",
  "建安七子：孔融、陈琳、王粲、徐干、阮瑀、应玚、刘桢。",
  "竹林七贤：嵇康、山涛、阮籍、向秀、刘伶、王戎、阮咸。",
  "旗本八骑：梁兴、侯选、程银、李堪、张横、成宜、马玩、杨秋。",
  "荀氏八龙：荀俭、荀绲、荀靖、荀焘、荀汪、荀爽、荀肃、荀旉。",
  "八健将：张辽、臧霸、郝萌、曹性、成廉、魏续、宋宪、侯成。",
  "司马八达：司马朗、司马懿、司马孚、司马馗、司马恂、司马进、司马通、司马敏。",
];
let i = 0;
let intervalId = setInterval(() => {
  if (i < 14) {
    arr.value[i] = list[i];
    i++;
  }
  console.log("创造一个定时器,循环加入三国人物,直到组件毁灭,停止");
}, 3000);
onMounted(() => {
  console.log(`the component is now mounted.`);
  console.log(el.value);
});
const count = ref(0);
onUpdated(() => {
  // 文本内容应该与当前的 `count.value` 一致
  console.log(document.getElementById("count").textContent, 2);
});

onUnmounted(() => {
  clearInterval(intervalId);
  console.log("已停止");
});
function kkx() {
  count.value++;
  // 直接获取dom没有渲染
  // console.log(document.getElementById("").textContent, 1);
  nextTick(() => {
    // dom渲染完成
    console.log(document.getElementById("count").textContent, 3);
  });
}
</script>
